<template>
    <div class="flex justify-center mb-4">
        <el-button type="primary" @click="get_fun" >Get</el-button>
        <el-button type="primary" @click="post_fun">Post</el-button>
    </div>
    <el-form
    label-width="100px"
    :model="formLabelAlign"
    style="max-width: 860px"
    >
    <el-form-item label="ulr">
      <el-input v-model="formLabelAlign.ulr" placeholder="Please input url">
      <template #prepend>http://localhost:5000</template>
    </el-input>
    </el-form-item>
    <el-form-item label="数据">
      <el-input v-model="formLabelAlign.data" />
    </el-form-item>

    <el-form-item label="结果">
        <div class="border-2">
            <el-text class="mx-1" type="primary">{{formLabelAlign.rv}}</el-text>
        </div>
        
    </el-form-item>
  </el-form>
  </template>
  
  <script setup>
  import { ref ,onMounted,getCurrentInstance} from 'vue'


  const handleClick = () => {
    console.log('click')
  }
  
 const formLabelAlign = ref(
    {
        ulr:'/api/baidu/?city=武汉',
        data:'{"action":"add/edit/del/get"}',
        rv:'true'
    }
 )
  
 const { proxy } = getCurrentInstance()
    //page init
    onMounted(()=> {
      proxy.$http.get('/api/baidu/?city=武汉',{})
        .then((rv) => {
              console.log(rv);
          })
    })

    

    function get_fun(){
        console.log("Get:",formLabelAlign.value);
        proxy.$http.get(formLabelAlign.value.ulr,JSON.parse(formLabelAlign.value.data))
        .then((rv) => {
            formLabelAlign.value.rv = JSON.stringify(rv)
              console.log(rv);
          })
    }

    function post_fun(){
        console.log("post:",formLabelAlign.value);
        proxy.$http.post(formLabelAlign.value.ulr,JSON.parse(formLabelAlign.value.data))
        .then((rv) => {
            formLabelAlign.value.rv = JSON.stringify(rv)
              console.log(rv);
          })
    }
</script>

<style>

</style>